<template>
	<view>
		<block v-if="userInfo.id!=undefined">
			<view class="content-box">
				<!-- 状态栏高度 -->

				<image class="bgImg" :src="$imgSrc('static/images/mine-bgColor.png')"></image>

				<view class="title-box">
					<view class="lr-box">
						<!-- <image class="wh100" src="/static/guoke/l-jiantou.jpg"></image> -->
					</view>
					<view class="title">我的</view>
					<view class="lr-box"></view>
				</view>

				<view class="user-info-box">
					<view class="left">
						<image class="wh100"  v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
						<image class="wh100"  v-else src="../../static/avatar.png" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="title">
							<text>{{userInfo.nickname}}</text>
							<image @click="$go('newmy/userinfo/userinfo')" :src="$imgSrc('static/images/shezhi.png')"></image>
						</view>
						<view style="min-height:120upx;" class="info-box">
							
							<!-- <view class="img-box">
								<image class="wh100" :src="$imgSrc('static/images/guoke/wuliu.png')" mode="heightFix">
								</image>
							</view>
							<view class="img-box">
								<image class="wh100" :src="$imgSrc('static/images/guoke/geren.png')" mode="heightFix">
								</image>
							</view>
							<view class="img-box">
								<image class="wh100" :src="$imgSrc('static/images/guoke/zhizao.png')" mode="heightFix">
								</image>
							</view>
							<view class="img-box">
								<image class="wh100" :src="$imgSrc('static/images/guoke/jinxiao.png')" mode="heightFix">
								</image>
							</view>
							<view class="img-box">
								<image class="wh100" :src="$imgSrc('static/images/guoke/zhuanxian.png')"
									mode="heightFix">
								</image>
							</view> -->
							
							
							
						</view>
					</view>
				</view>
			</view>

			<view class="mymone">
				<view class="wdqb">
					<view class="title_mymone">我的钱包</view>
					<view class="yuemone">
						<view @click="$go('newbalance/bill')" class="litbs">
							<view style="width: 100%;height: 80rpx;float: left;line-height: 80rpx;color: #0594fb;">
								￥{{userInfo.now_money}}
							</view>
							<view style="width: 100%;height: 80rpx;float: left;line-height: 40rpx;">余额</view>
						</view>
						<view style="width: 2rpx; height: 40rpx; float: left;margin-top: 50rpx;background: #ccc;">
						</view>
						<view class="litbs" @click="$go('newcoupon/index')">
							<view style="width: 100%;height: 80rpx;float: left;line-height: 80rpx;color: #0594fb;">
								{{userInfo.coupon_count}}
							</view>
							<view style="width: 100%;height: 80rpx;float: left;line-height: 40rpx;">优惠卷</view>
						</view>
						<view style="width: 2rpx; height: 40rpx; float: left;margin-top: 50rpx;background: #ccc;">
						</view>
						<view @click="$go('tab/orderList')" class="litbs">
							<view style="width: 100%;height: 80rpx;float: left;line-height: 80rpx;color:">{{userInfo.order_times}}</view>
							<view style="width: 100%;height: 80rpx;float: left;line-height: 40rpx;">信息发布次数</view>
						</view>

					</view>
				</view>
			</view>


			<view class="pb24 pt24">
				<view class="bgfff pt24 pb24 bdra20 ">
					<view class="pl24 fz32 col333 fwb">常用服务</view>
					<view class="dsf">
						<view @click="$go('newaddress/path')" class="fg1 dsif alc jcc pt24 flex-column fz26 col333">
							<view class="w54 h50 dsf jcc">
								<image class="w50 h50" :src="$imgSrc('/static/new/bj-icon1.png')"></image>
							</view>
							<view class="pt15">常用路线</view>
						</view>
						<view @click="$go('newaddress/book')" class="fg1 dsif alc jcc pt24 flex-column fz26 col333">
							<view class="w54 h50 dsf jcc">
								<image class="w45 h50" :src="$imgSrc('/static/new/bj-icon2.png')"></image>
							</view>
							<view class="pt15">地址簿</view>
						</view>
						<view @click="$go('newdriver/collection')"
							class="fg1 dsif alc jcc pt24 flex-column fz26 col333">
							<view class="w54 h50 dsf jcc">
								<image class="w50 h50" :src="$imgSrc('/static/new/bj-icon3.png')"></image>
							</view>
							<view class="pt15">收藏司机</view>
						</view>
						<view @click="$go('newmy/invoice/invoice')"
							class="fg1 dsif alc jcc pt24 flex-column fz26 col333">
							<view class="w54 h50 dsf jcc">
								<image class="w54 h50" :src="$imgSrc('/static/new/bj-icon4.png')"></image>
							</view>
							<view class="pt15">发票管理</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pb24">
				<view class="bgfff pt24 pb24 bdra20 ">
					<view class="pl24 fz32 col333 fwb">系统功能</view>
					<view class="dsf">
						<view @click="$go('newtruck/freight')" class="fg1 dsif alc jcc pt24 flex-column fz26 col333">
							<view class="w54 h50 dsf jcc">
								<image class="w44 h50" :src="$imgSrc('/static/new/bz-icon3.png')"></image>
							</view>
							<view class="pt15">收费标准</view>
						</view>

						<view @click="show_phone=true" class="fg1 dsif alc jcc pt24 flex-column fz26 col333">
							<view class="w54 h50 dsf jcc">
								<image class="w38 h50" :src="$imgSrc('/static/new/bz-icon1.png')"></image>
								<!-- <button hoverClass="none" openType="contact" type="default ">
								<image class="w38 h50" src="/static/new/bz-icon1.png"></image>
							</button> -->
							</view>
							<view class="pt15">平台客服</view>
							<!-- show_phone	<button hoverClass="none" openType="contact" type="default ">
							<view class="pt15 fz26">平台客服</view>
						</button> -->

						</view>

					</view>

				</view>
			</view>
			<st-tabbar :tabbar="tabbar"></st-tabbar>

			<u-modal title="" :show="show_phone" :closeOnClickOverlay="false" :showConfirmButton="false"
				:showCancelButton="false">
				<view class="bg-box">
					<view class="text-model" style="width:100%;">
						<view class="mt-92 col333 tcenter">您需要联系平台吗？</view>
						<view class="mt-36 col333 tcenter">400-800-9999</view>
						<view class="mt-12 col777 tcenter fz24">平台电话</view>
					</view>

					<view class="mt-32 bnt-box">
						<view class="bcls dbnt" @click="show_phone=false">暂不联系</view>
						<view class="bcls" style="color:#fff" @click="callPhone">立即拨打</view>
					</view>
					<view class="phone-box">
						<image src="../../static/phone.png" class="img-cls"></image>
					</view>
				</view>


			</u-modal>
		</block>
	</view>

</template>


<script>
	export default {
		data() {
			return {
				tabbar: {
					current: 3
				},
				status: 1,
				userInfo: {},
				platform: 1,
				show_phone: false,
				show_time: false
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo();
		},

		methods: {
			getUserInfo() {
				this.$api['post']('user/refresh-user').then(res => {
					if (res.code == 200) {
						this.userInfo = res.data;
						this.$store.commit("getUserInfo", res.data);
					}
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '18171956820'
				});

			}
		}
	}
</script>
<style scoped lang="scss">
	.bgImg {
		width: 100%;
		height: 440rpx;
		position: absolute;
		top: 0;
		left: 0
	}

	.title-box {
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.lr-box {
			width: 100rpx;
			height: 100%;
			display: flex;
			align-items: center;

			image {
				width: 52rpx;
				height: 52rpx;
			}
		}

		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.user-info-box {
		width: 100%;
		height: 300rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 10;

		.left {
			width: 152rpx;
			height: 152rpx;
			overflow: hidden;
			border-radius: 76upx;
			margin-top: -60rpx;
		}

		.right {
			width: 538rpx;
			height: 100%;
			padding: 0 28rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.title {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				justify-content: space-between;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.info-box {
				display: flex;
				flex-wrap: wrap;

				.img-box {
					height: 44rpx;
					margin-right: 32rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	page {
		background-color: #eef2fd
	}

	.denglu {
		font-size: 39upx
	}

	.setting-icon {
		margin-right: 156upx
	}

	button::after {
		border: none
	}

	button {
		-webkit-tap-highlight-color: transparent;
		background-color: #fff;
		box-sizing: border-box;
		color: #000;
		display: block;
		height: 100%;
		line-height: 1.35;
		margin-left: auto;
		margin-right: auto;
		overflow: hidden;
		padding-left: 0;
		padding-right: 0;
		position: relative;
		text-align: center;
		text-decoration: none;
		width: 100%
	}

	.mymone {
		width: 100%;
		height: 220rpx;
		float: left;
		background: #fff;

		.wdqb {
			width: 90%;
			height: 100%;
			float: left;
			margin-left: 5%;

			.title_mymone {
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				border-bottom: 1rpx solid #ccc;
				float: left;
			}

			.yuemone {
				width: 100%;
				height: 150rpx;
				float: left;

				.litbs {
					width: 28%;
					height: 100%;
					float: left;
					margin-left: 4%;

				}
			}
		}

	}

	.bg-box {
		overflow: hidden;
		width: 100%;
	}

	.text-model {
		width: 100%;
		height: 272upx;
		background: linear-gradient(180deg, #C2E6FE 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 16upx;
		overflow: hidden;
	}

	.bnt-box {
		text-align: center;
		overflow: hidden;
		height: 140upx;
		width: 100%;

		.dbnt {
			background: #fff;
			color: #777777;
			border: 2upx solid #AAAAAA;
			font-size: 32upx;
			margin-right: 34upx;
		}
	}

	.bcls {
		width: 262upx;
		display: inline-block;
		border-radius: 16upx;
		height: 92upx;
		line-height: 92upx;
		background: #0195FD;
	}

	.phone-box {
		width: 100%;
		height: 104upx;
		position: absolute;
		top: -52upx;
		text-align: center;

		.img-cls {
			width: 104upx;
			height: 104upx;
		}
	}
</style>